<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input v-model="tenantName" clearable @clear="nameClear" placeholder="请输入租户名称" size="small"
          style="width: 220px" maxlength="20">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
            @click="searchClick"></el-button></el-input>
      </div>
      <div class="header_right">
        <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px" @click="addClick" v-permission="{ action: 'tenant:add' }">
          新增
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="dataList" class="table" :header-cell-style="headerStyle" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(47, 51, 73, 0.3)">
        <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
        <el-table-column align="center" prop="name" label="租户名称" min-width="100"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="siteName" label="站点名称" min-width="90"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="siteLogo" label="站点logo" min-width="90">
          <template slot-scope="{ row }">
            <div style="display: flex;align-items: center;justify-content: center;width: 100%;">
              <el-popover placement="top-start" title="" trigger="hover"
                v-if="row.siteLogo != 'null' && row.siteLogo != ''">
                <img :src="row.siteLogo" alt="" style="width: 250px;">
                <img slot="reference" :src="row.siteLogo" style="width: 25%;">
              </el-popover>
              <el-image v-else style="width: 25%;display: flex;align-items: center;" fit="fill"
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="fromTime" label="有效期开始" min-width="150"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="toTime" label="有效期结束" min-width="150"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作" min-width="140">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom" v-permission="{ action: 'tenant:edit' }">
              <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom" v-permission="{ action: 'tenant:delete' }">
              <i @click="delClick(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit" :pageSizes="[10, 20, 30, 50]"
        @pagination="getDataList" class="pagination" />
    </div>
    <tenant-add ref="refAdd"></tenant-add>
    <tenant-edit ref="refEdit" :editData="editData" @clearEditData="clearEditData"></tenant-edit>
  </div>
</template>

<script>
import { reqTenantList, reqTenantDel } from "@api/api.js";
import Pagination from "../../components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";
import TenantAdd from "./components/TenantAdd.vue";
import TenantEdit from "./components/TenantEdit.vue";
export default {
  name: "tenant",
  components: { Pagination, TenantAdd, TenantEdit },
  mixins: [tableStyleMixin],
  data() {
    return {
      tenantName: "",
      loadingSearch: false, //查询按钮loading
      dataList: [],
      loadingTable:false,
      limit: 10,
      page: 1,
      total: 0,
      editData: {}, //修改数据
    };
  },
  created() {
    this.getDataList();
  },
  mounted() { },
  methods: {
    // 获取租户列表
    async getDataList() {
      this.loadingTable=true;
      const res = await reqTenantList(this.page, this.limit, {
        name: this.tenantName,
      });
      this.loadingTable=false;
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    // 搜索
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    // 清除请求
    nameClear() {
      this.getInitDataList();
    },
    // 新增
    addClick() {
      this.$refs.refAdd.dialogVisible = true;
    },
    // 编辑
    editClick(row) {
      this.editData = JSON.parse(JSON.stringify(row));
      this.$refs.refEdit.dialogVisible = true;
    },
    // 清除editData
    clearEditData() {
      this.editData = {};
    },
    // 删除
    async delClick(id) {
      const result = await this.$confirm(
        "此操作将永久删除该租户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => { });
      if (result !== "confirm") return;
      const res = await reqTenantDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

// 时间组件--新增&编辑用
::v-deep .el-range-input {
  background-color: transparent;
  color: @primaryTxtcolor;
}

::v-deep .el-range__icon {
  color: #686868;
}

::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

// 站点logo居中
::v-deep .el-popover__reference-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
